<template>
    <div>
        <div class="bg-blue-400 h-screen w-screen" v-if="!isLogin">
            <div class="flex flex-col items-center flex-1 h-full justify-center px-4 sm:px-0">
                <div class="flex rounded-lg shadow-lg w-full sm:w-3/4 lg:w-1/2 bg-white sm:mx-0" style="height: 500px">
                    <div class="flex flex-col w-full md:w-1/2 p-4">
                        <div class="flex flex-col flex-1 justify-center mb-8">
                            <h1 class="text-4xl text-center font-thin">
                                登录后台
                            </h1>
                            <div class="w-full mt-4">
                                <form class="form-horizontal w-3/4 mx-auto" method="POST" action="#">
                                    <div class="flex flex-col mt-4">
                                        <el-input v-model="form.mobile" placeholder="请输入手机号" size="normal"
                                                  clearable></el-input>
                                        <hd-error name="mobile"/>
                                    </div>
                                    <div class="flex flex-col mt-4">
                                        <el-input v-model="form.password" placeholder="请输入登录密码" size="normal" clearable
                                                  show-password></el-input>
                                        <hd-error name="password"/>
                                    </div>

                                    <div class="flex flex-col mt-4">
                                        <hd-captcha v-model="form.captcha" ref="captcha"/>
                                    </div>
                                    <div class="flex items-center mt-4">
                                        <input type="checkbox" name="remember" v-model="form.remember" id="remember"
                                               class="mr-2"/>
                                        <label for="remember" class="text-sm text-grey-dark">记住我 </label>
                                    </div>
                                    <div class="flex flex-col mt-8">
                                        <button
                                                type="button"
                                                class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded"
                                                @click="onSubmit"
                                        >
                                            登录
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div
                            class="hidden md:block md:w-1/2 rounded-r-lg"
                            style="
                            background: url('https://images.unsplash.com/photo-1513436751219-68cb8861ebef?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=634&q=80');
                            background-size: cover;
                            background-position: center center;
                        "
                    ></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import HdFooter from './Footer'

    export default {
        route: {path: '/admin'},
        components: {HdFooter},
        created() {
            if (this.isLogin) {
                this.router('site.site.index')
            }
        },
        data() {
            return {
                form: {
                    mobile: '18090900235',
                    password: 'admin888',
                    captcha: {},
                    remember: false
                }
            }
        },
        methods: {
            onSubmit() {
                this.axios
                    .post(`login`, this.form)
                    .then(({token}) => {
                        //本地缓存的TOKEN
                        // localStorage.setItem("token", token);
                        location.href = '/site/site/index'
                    })
                    .finally(_ => this.$refs.captcha.get())
            }
        }
    }
</script>

<style></style>
